<template>
	<view class="my">
		<!-- 1.上面部分 -->
		<view class="top">
			<!-- 背景图片 -->
			<image :src="src"></image>
			<!-- 卡片1 -->
			<view class="card" >
				<!-- 头像 -->
				<view>
					<u-avatar :src="avatar" size=60 @click="changeAvatar();"></u-avatar>
				</view>
				<view class="info" @click="toUserInfo">
					<view class="title">
						<u--text type="primary" :text="'Hi! 欢迎您 '+name"></u--text>
					</view>
					<view>
						<u--text type="info" :text="'当前用户: '+name"></u--text>
					</view>
				</view>
			</view>

		</view>

		<!-- 2.下面部分 -->
		<view class="bottom">

			
			<view class="card1">
				<view class="cardItem" v-for="item in cardItemList" :key="item.title"
					@click="toTarget(item.path,item.isTabbar);logout(item.path)">

					<view class="hang">
						<text :class="item.hangInconClass1"> </text>
						<text class="title">{{item.title}}</text>
						<text class="iconfont icon-xiangyou1"></text>

					</view>
					<!-- 分割线 被divider坑了 用border-bottom就可以简单实现了！-->

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '../../static/background.jpg',
				avatar:'../../static/avatar.png',
				id: '',
				name: '',
				cardItemList: [{
					hangInconClass1: "iconfont icon-shoucang",
					title: '收藏',
					path: '../collection/collection',
					isTabbar:false

				}, {
					hangInconClass1: "iconfont icon-xinxi",
					title: '信息',
					path: '../userInfo/userInfo',
					isTabbar:false

				}, {
					hangInconClass1: "iconfont icon-saoyisao",
					title: '扫码',
					path: '../scan/scan',
					isTabbar:false
				}, {
					hangInconClass1: "iconfont icon-shezhi",
					title: '设置',
					path: '../setting/setting',
					isTabbar:false
				},{
					hangInconClass1: "iconfont icon-xiugaimima",
					title: '改密',
					path: '../changePwd/changePwd',
					isTabbar:false
				}, {
					hangInconClass1: "iconfont icon-denglu",
					title: '登录',
					path: "../login/login",
					isTabbar:false
				}, {
					hangInconClass1: "iconfont icon-tuichu",
					title: '退出',
					path: "../my/my",
					isTabbar:true
				}, ],

			}
		},
		methods: {
			// 1.获取用户名方法
			getUserName(id) {
				uni.request({
					// 模板字符串 1.`` 反引号包裹全部 2.${参数}
					url: `http://blog.coldworld.top:8081/user/getuser/${id}`,
					success: (res) => {
						// console.log(res)
						this.account = res.data.data.data.username
						this.name = res.data.data.data.username
					}

				})
			},
			// 2.退出登录的方法
			logout(path){
				if(path=="../my/my"){
				uni.removeStorageSync('id')
				this.name=''
				// 提示用户
				return uni.showToast({
					title:"退出成功！",
					icon:"success",
				})
				}
			},
			// 3.页面跳转的方法
			toTarget(url, isTabbar) {
				if(isTabbar){
					uni.switchTab({
						url
					})
				}else{
					uni.navigateTo({
						url: url
					})
				}
			},
			// 4.改变头像的方法
			changeAvatar(){
				// this.src=u
				console.log('TODO改头像')
				// todo
			},
			// 5.去到用户信息页的方法
			toUserInfo(){
				uni.navigateTo({
					url:"../userInfo/userInfo"
				})
			}

		},
		onLoad() {
			let id = uni.getStorageSync('id')
			// console.log(id)
			if (id) {
				this.id = id
				this.getUserName(id)
			}

		},
		onShow() {
			let id = uni.getStorageSync('id')
			if (id) {
				this.id = id
				this.getUserName(id)
			}
		}
	}
</script>

<style lang="scss">
	page {
		// 底色浅灰色
		background-color: #eee;

		.my {
			.top {
				image {
					width: 100%;
					height: 400rpx;
				}

				.card {
					width: 100%;
					height: 255rpx;
					background-color: #fff;
					// d第一个上下，2 左右
					margin-top: -128rpx;
					// 圆角
					border-radius: 10rpx;
					// 内减模式
					box-sizing: border-box;
					padding: 40rpx;
					align-items: flex-end;

					display: flex;
					// 阴影
					box-shadow: 6rpx 6rpx 14rpx #ccc;

					.info {
						margin-left: 28rpx;

						.title {
							margin-bottom: 0rpx;
							font-weight: bold;
							color: #000;
							font-size: 36rpx;
						}

					}
				}

			}

			.bottom {
				.card1 {
					width: 725rpx;
					height: 660rpx;
					background-color: #fff;
					// d第一个上下，2 左右
					margin: 20rpx auto;
					// 圆角
					border-radius: 10rpx;
					// 内减模式
					box-sizing: border-box;
					padding: 40rpx;
					display: flex;
					// 阴影
					box-shadow: 6rpx 6rpx 14rpx #ccc;
					// 多了换行
					flex-wrap: wrap;

					.cardItem {
						//每一项最好不用换行，点击事件踩坑 #c0c4cc 
						height: 70rpx;
						display: flex;
						border-bottom: solid  1px #CDC9C9;
						.iconfont {
							font-size: 50rpx;
							color: #1296db;
						}
						.hang {
							// 多了换行
							flex-wrap: wrap;
							width: 100%;
							display: flex;
							box-sizing: border-box;

							.title {
								margin-left: 20rpx;
								margin-right: 449rpx;
							}


							.icon-xiangyou1 {
								// color: #a1a6a4;
								color: #e4e4e4;
							}


						}
						// .divider {
						
						// 	// 子类选择器
						// 	&>input {
						// 		width: 60rpx;
						// 		// width: 200rpx;
						// 	}
						// }

					}

				}
			}
		}
	}
</style>
